<template>
  <div id="Chart2" :style="{ height: '100%', width: '100%' }"></div>
</template>
<script>
import * as echarts from 'echarts'
// import 'echarts-wordcloud'
require('echarts-wordcloud')
export default {
  data: function () {
    return {
      myChart: null,
    }
  },
  mounted() {
    this.initEchart()
  },
  methods: {
    initEchart() {
      this.myChart = this.$echarts.init(document.getElementById('Chart2'))
      this.myChart.setOption({
        series: [
          {
            type: 'wordCloud',
            shape: 'smooth',
            gridSize: 0,
            size: ['50%', '50%'],
            rotationRange: [-45, 0, 45, 90],
            textStyle: {
              normal: {
                fontFamily: '微软雅黑',
                color: function () {
                  return (
                    'rgb(' +
                    Math.round(Math.random() * 255) +
                    ',' +
                    Math.round(Math.random() * 255) +
                    ',' +
                    Math.round(Math.random() * 255) +
                    ')'
                  )
                },
              },
              emphasis: {
                shadowBlur: 5,
                shadowColor: '#333',
              },
            },
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            width: '100%',
            height: '100%',
            data: [
              { name: '北京', value: 2352 },
              { name: '上海', value: 123 },
              { name: '广州', value: 123 },
              { name: '深圳', value: 123 },
              { name: '石家庄', value: 123 },
            ],
            // chartSettings: {
            //   color: [
            //     'rgba(97,216,0,.7)',
            //     'rgba(204,178,26,.7)',
            //     'rgba(245,166,35,.7)',
            //     'rgba(156,13,113,.7)',
            //   ],
            // },
          },
        ],
      })
    },
  },
}
</script>
<style lang="less" scoped></style>
